<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!--action="" 数据以get方式提交到当前页  在url可见  -->
  <form action="" method="GET">
    <p>
      <span>用户名:</span>
      <input type="text" name="user" value="" placeholder="请输入用户名">
    </p>
    <p>
      <span>密&emsp;码:</span>
      <input type="password" name="pwd" value="" placeholder="请输入用户名">
    </p>
    <p>
      <span>性&emsp;别:</span>
      <input type="radio" name="sex" value="man">男
      <input type="radio" name="sex" value="woman">女
      <input type="radio" checked="checked" name="sex" value="secret">保密
    </p>
    <p>
      <input type="submit" value="注册">
      <input type="reset" value="取消">
    </p>
  </form>
  <a href="#one">one</a>
  <a href="#two">two</a>
  <a href="#three">three</a>
  <a href="#four">four</a>
  <br>
  <button id="get">获取</button>
  <button id="set">设置</button>
  <button id="re">刷新</button>
</body>
<script>
  // location   => window.location  地址栏对象
  // location对象包含有关当前 URL 的信息。

  // live server 可以在本地启动一个假的服务器,可以提供简单的服务器环境
  // http://127.0.0.1:5500/day15/html/04%20location.html?user=a123123&pwd=123123&sex=man#one

  // 127.0.0.1  localhost  代表本地主机(自己的电脑ip  192.168.70.226)

  console.log(location);

  // location相关的属性和方法
  // 属性(都是字符串)
  // protocol    获取和设置url中协议部分
  // hostname    获取和设置url中域名/主机名部分
  // port        获取和设置url中端口部分

  // host        获取和设置url中 域名+端口 部分
  // origin      获取和设置url中 协议+域名+端口 部分

  // pathname    获取和设置url中 文件路径 部分

  // search      参数数据部分  ?之后#之前
  // hash        锚点(hash值)

  // href        获取和设置 url   (设置url时可以实现当前页面跳转 open()方法可以打开新的窗口)

  // 方法
  // reload()     页面重载(刷新)


  var getBtn = document.getElementById("get");
  var setBtn = document.getElementById("set");
  var reBtn = document.getElementById("re");

  getBtn.onclick = function () {
    console.log(location.protocol);
    console.log(location.hostname);
    console.log(location.port);
    console.log(location.host);
    console.log(location.origin);
    console.log(location.pathname);
    console.log(location.search);
    console.log(location.hash);
    console.log(location.href);
  }
  setBtn.onclick = function () {
    // location.protocol = "https:";
    // location.hostname = "baidu.com";
    // location.port = 3000;

    // location.search="?a=1&b=2";
    // location.hash="#two";

    location.href = "https://www.baidu.com"
  }

  reBtn.onclick = function () {
    location.reload();
  }




</script>

</html>